<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <script src="./js/jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.cls-2 input:radio').click(function () {
                var domName = $(this).attr('name');
                var $radio = $(this);
                if ($radio.data('waschecked') == true) {
                    $radio.prop('checked', false);
                    $("input:radio[name='" + domName + "']").data('waschecked', false);
                } else {
                    $radio.prop('checked', true);
                    $("input:radio[name='" + domName + "']").data('waschecked', false);
                    $radio.data('waschecked', true);
                }
            });
            $("#btn-submit").on("click", function () {
                var formAction = $("#one-form");
                var data = formAction.serialize();
                $.ajax({
                    "url": "./buy.do",
                    "type": "post",
                    "data": data,
                    "success": function (result1) {
                        if ($(".text div").length > 0) {
                            $(".text div").remove();
                        }
                        var obj1 = jQuery.parseJSON(result1);
                        var newPageCode1 =
                            "<div><p><br/></p><p>购物信息：</p><p>编号：" + obj1.str1 +
                            "</p><p>商品总额：" + obj1.str2 + "</p><p>付款方式：" + obj1.str3 + "</p></div>";
                        $("#new-page-1").after(newPageCode1);
                        $.ajax({
                            "url": "./price2hans.do",
                            "type": "post",
                            "data": {"data2": result1},
                            "success": function (result2) {
                                var obj2 = jQuery.parseJSON(result2);
                                var newPageCode2 =
                                    "<div><p><br/></p><p>购物信息：</p><p>编号：" + obj2.str1 +
                                    "</p><p>商品总额：" + obj2.str2 + "</p><p>付款方式：" + obj2.str3 + "</p></div>";
                                $("#new-page-2").after(newPageCode2);
                            }, "error": function () {
                                alert("error-2");
                            }
                        });
                    },
                    "error": function () {
                        alert("error-1");
                    }
                });
            })
            ;
        });
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-size: 16px;
        }

        .container {
            width: 100%;
            height: 600px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .container-main {
            width: 1000px;
            height: 300px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }

        .left, .right-1, .right-2 {
            width: 300px;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .left div {
            padding-top: 20px;
        }

        .right-1, .right-2 {
            border: 1px solid #000000;
            font-size: 18px;
            margin-right: 5px;
        }
    </style>
</head>
<body>


<div class="container">
    <div class="container-main">
        <div class="left">
            <h2>欢迎光临好味水果小店</h2>
            <form action="/buy" method="post" id="one-form">
                <div class="cls-1">
                    <label>顾客编号</label>
                    <input type="text" name="customer-number"/>
                </div>
                <div class="cls-2">
                    <div class="cls-2-1">
                        <input type="radio" value="1" name="fruit-1"/>
                        <span>苹果</span>
                        <select name="weight-1">
                            <option value="1" selected>1斤</option>
                            <option value="2">2斤</option>
                            <option value="3">3斤</option>
                            <option value="4">4斤</option>
                            <option value="5">5斤</option>
                        </select>
                        <span>5元/千克</span>
                    </div>
                    <div class="cls-2-2">
                        <input type="radio" value="2" name="fruit-2"/>
                        <span>香蕉</span>
                        <select name="weight-2">
                            <option value="1" selected>1斤</option>
                            <option value="2">2斤</option>
                            <option value="3">3斤</option>
                            <option value="4">4斤</option>
                            <option value="5">5斤</option>
                        </select>
                        <span>15元/千克</span>
                    </div>
                    <div class="cls-2-3">
                        <input type="radio" value="3" name="fruit-3"/>
                        <span>橘子</span>
                        <select name="weight-3">
                            <option value="1" selected>1斤</option>
                            <option value="2">2斤</option>
                            <option value="3">3斤</option>
                            <option value="4">4斤</option>
                            <option value="5">5斤</option>
                        </select>
                        <span>10元/千克</span>
                    </div>
                </div>
                <div class="cls-3">
                    <label>支付方式</label>
                    <span><input type="radio" name="pay" value="现金">现金
                        <input type="radio" name="pay" value="信用卡">信用卡</span>
                </div>
                <div class="cls-4">
                    <button type="button" id="btn-submit">购买</button>
                    <button type="reset">取消</button>
                </div>
            </form>
        </div>
        <div class="right-1">
            <div class="text">
                <p id="new-page-1">返回结果：</p>
            </div>
        </div>
        <div class="right-2">
            <div class="text">
                <p id="new-page-2">处理结果：</p>
            </div>
        </div>

    </div>
</div>

</body>
</html>